ComponentTests
Horizontal Bar Chart – Component test plan
Sub-components: Bar, Callout, Labels, Benchmark
- Bar: Bar data, Bar color (single), bar label(left and right)
- Callout: Default/custom callout
- Labels: Default/Custom labels
Test steps | Validation | Tool used |
---|---|---|
Test 1: [Snapshot testing] | ||
- With only data prop, string data on x-axis. | Should render horizontal bar chart legend with string data | RTL |
- With variant set to “absolute scale” | Should render absolute scale variant correctly | Enzyme |
- With variant set to “absolute scale” and hide labels set to “true” | Should not render bar labels in absolute scale variant | Enzyme |
Test 2: Basic props testing | ||
- HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
- HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
- onRenderCalloutPerHorizantalBar prop is not given | Should not render onRenderCalloutPerHorizantalBar | Enzyme |
- onRenderCalloutPerHorizantalBar is given | Should render onRenderCalloutPerHorizantalBar | Enzyme |
- HideLabels prop set to “true” | Should not render bar labels when hideLabels is true | RTL |
- Legend value set to “x” | Should display legend/left side label with specified data | RTL |
Test 3: Render calling with respective to props | ||
- No prop changes: Mount HorizontalBarChart and then set the same props again | Render function should have been called twice | Enzyme |
- Prop changes: Mount HorizontalBarChart chart and then set some other prop | Render function should have been called twice | Enzyme |
Test 4: Mouse events | ||
- Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
- Mouse move from one bar to other bar | Should render callout correctly on mouse move | RTL |
- Mouse over on a bar with customized callout | Should render customized callout on mouseover | RTL |
Test 5: [Sub-Component]: Bar | ||
- Specify bar color | Should render bar with the specified color | RTL |
- setbarHeight to “x” | Should render bars with specified height | RTL |
- set variant to “absolute scale” | Should render bars right side label inline with bar | RTL |
- set variant to “part to whole” | Should render bars right side label on top of bar | RTL |
- set chartDataMode to “fraction” | Should render bar right side label value as a fractional one | RTL |
- set chartDataMode to “percentage” | Should render bar right side label value as a percentage value | RTL |
- set barChartCustomData to “x” | Should show custom data on bar right side label | RTL |
Test 6: [Sub-Component]: Benchmark | ||
- Specify benchmark data | Should render bars with benchmark symbol | RTL |
Test 7: [Sub-Component]: Callout | ||
- Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
- Hover mouse over a bar to display callout | Should show the default callout over that bar | RTL |
- Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
Test 8: [Sub-Component]: Screen resolution | ||
- Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
- Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
Test 9: Theme changed to Dark Theme | Should reflect theme change | RTL |
Test 10: Horizontal bar chart re-rendering | ||
- Update chart data | Should re-render chart when data is updated | RTL |
Test 11: Horizontal bar chart with empty data | ||
- Chart with Empty data | Should render chart with Empty chart are label | Enzyme |
- Chart with proper data | Should not render chart with empty chart are label | Enzyme |